wdm2201f11 - Forms & Inputs

Text Field
A single text box used for specific information. Typically a login, password, or search bar. All things that typically have a specific label for whatever purpose they serve. Another example would be the url bar which is used for url's only. It will always be one line or one word.

<form action="form_action.asp" method="get">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  <input type="submit" value="Submit" />
</form>

Password Field
Single-line password field that is attributed with a user name.The password field will be masked

<html>
<body>
 
<form action="">
Username: <input type="text" name="user" /><br />
Password: <input type="password" name="password" />
</form>
 
<p><b>Note:</b> The characters in a password field are masked (shown as asterisks or circles).</p>
 
</body>
</html>

Text Area
The <textarea> tag defines a multi-line text input control. A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).
The size of a textarea can be specified by the cols and rows attributes, or even better; through CSS' height and width properties.

<textarea rows="2" cols="20"> This is a text area </textarea>

Radio Buttons
Allow users to select only one item at a time from a list of inputs. More user friendly than a drop down box. Use when you have a list of item and you only want the user to select one of them.

<form action="something.php">
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>

Checkboxes
Used in selection and multiple choices can be made.

<form action="">
Check 1<input name="check" type="checkbox" value="1" id="check" />
Check 2<input name"check2" type="checkbox" value="2" id="check2" />
</form>

Drop Down List
To give the user a list of options to choose from.
They can have multiple select or single item selection.
Some optional attributes are:
disbaled
name
size
multiple

<select>
<option value="1">Option One</option>
<option value="2">Option Two</option>
<option value="3">Option Three</option>
</select>

Submit Button
A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input

<form name="input" action="html_form_action.asp" method="get" id="input"><input type="submit" value="Submit" /></form>